<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title>老司机</title>
		<link rel="stylesheet" type="text/css" href="libs/ionic/css/ionic.min.css" />
		<link rel="stylesheet" type="text/css" href="min-css/index.min.css" />

		<script src="libs/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/ionic/js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/angular-sanitize.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="min-js/index.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body ng-app="app" ng-controller="myCtrl" >
		<div class="bar bar-header">
			<div class="buttons">
				<button class="button" ng-click="doSomething()"><i class="icon ion-loop"></i></button>
			</div>
			<h1 class="title">老司机</h1>
		</div>
		<div class="bar bar-subheader" >
			<div class="row" ng-click="change($event)">
				<div class="col" ng-repeat="nav in navs" id="{{nav.id}}" ng-bind="nav.text" ng-class="nav.id == null? 'active' : ''"></div>
			</div>
		</div>
		<!--滑块-->
		<ion-slide-box  on-slide-changed="slideHasChanged($index,$event)" show-pager="false">
			<ion-slide>
				<div class="list card">
					<div class="item item-avatar">
						<img src="images/18.jpg">
						<h2>Marty McFly</h2>
						<p>November 05, 1955</p>
					</div>

					<div class="item item-body">
						<p>
							This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer.
						</p>
						<img class="full-image" src="images/18.jpg">
						
						<p>
							<a href="#" class="subdued">1 Like</a>
							<a href="#" class="subdued">5 Comments</a>
						</p>
					</div>

				</div>
				<div class="list card">

					<div class="item item-avatar">
						<img src="images/18.jpg">
						<h2>Marty McFly</h2>
						<p>November 05, 1955</p>
					</div>

					<div class="item item-body">
						<img class="full-image" src="images/18.jpg">
						<p>
							This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer.
						</p>
						<p>
							<a href="#" class="subdued">1 Like</a>
							<a href="#" class="subdued">5 Comments</a>
						</p>
					</div>

				</div>
			</ion-slide>
			<ion-slide>
				<div class="box yellow">
					<h1>YELLOW</h1></div>
			</ion-slide>
			<ion-slide>
				<div class="box pink">
					<h1>PINK</h1></div>
			</ion-slide>
			<ion-slide>
				<div class="box pink">
					<h1>PINK</h1></div>
			</ion-slide>
			<ion-slide>
				<div class="box pink">
					<h1>PINK</h1></div>
			</ion-slide>
		</ion-slide-box>
		<ion-footer-bar align-title="left" class="bar-light">
			<a class="tab-item activated">
				<i class="icon ion-android-home"></i>
			</a>
			<a class="tab-item">
				<i class="icon ion-android-happy happy"></i>
			</a>
			<a class="tab-item">
				<i class="icon ion-edit"></i>
			</a>
			<a class="tab-item">
				<i class="icon ion-social-octocat"></i>
			</a>
			<a class="tab-item">
				<i class="icon ion-android-person"></i>
			</a>
		</ion-footer-bar>
	</body>

</html>